<template>
  <l-layout class="l-user-d-select" :right="360">
    <div class="l-auto-window">
      <el-tabs v-model="activeName">
        <el-tab-pane :label="$t('用户')" name="tab1">
          <UserDimension ref="ref1" @change="handleChange" />
        </el-tab-pane>
        <el-tab-pane :label="$t('部门')" name="tab2">
          <DepartmentDimension ref="ref2" :type="2" :departments="departments" @change="handleChange" />
        </el-tab-pane>
        <el-tab-pane v-if="appConfig.isSecretLevel" :label="$t('密级')" name="tab3">
          <OptionsDimension
            ref="ref3"
            :columns="secretColumns"
            :loadData="
              () => {
                return loadDataItemList('SecretLevelManage');
              }
            "
            :type="3"
            @change="handleChange"
          />
        </el-tab-pane>
        <el-tab-pane :label="$t('行政级别')" name="tab4">
          <OptionsDimension
            ref="ref4"
            :columns="levelColumns"
            :loadData="
              () => {
                return loadDataItemList('LevelManage');
              }
            "
            :type="4"
            @change="handleChange"
          />
        </el-tab-pane>
        <el-tab-pane :label="$t('行政职务')" name="tab5">
          <OptionsDimension
            ref="ref5"
            :columns="jobColumns"
            :loadData="
              () => {
                return loadDataItemList('JobManage');
              }
            "
            :type="5"
            @change="handleChange"
          />
        </el-tab-pane>
        <el-tab-pane :label="$t('技术职务')" name="tab6">
          <OptionsDimension
            ref="ref6"
            :columns="roleColumns"
            :loadData="
              () => {
                return loadDataItemList('RoleManage');
              }
            "
            :type="6"
            @change="handleChange"
          />
        </el-tab-pane>
        <el-tab-pane :label="$t('职称等级')" name="tab7">
          <OptionsDimension
            ref="ref7"
            :columns="titleColumns"
            :loadData="
              () => {
                return loadDataItemList('TitleManage');
              }
            "
            :type="7"
            @change="handleChange"
          />
        </el-tab-pane>
        <el-tab-pane :label="$t('管理职务')" name="tab8">
          <OptionsDimension
            ref="ref8"
            :columns="postColumns"
            :loadData="
              () => {
                return loadDataItemList('PostManage');
              }
            "
            :type="8"
            @change="handleChange"
          />
        </el-tab-pane>
        <!--<el-tab-pane :label="$t('集成角色')" name="tab9">
          <integration-role-dimension ref="ref9" @change="handleChange" />
        </el-tab-pane>-->
        <el-tab-pane :label="$t('限定部门')" name="tab10">
          <DepartmentDimension ref="ref10" :type="10" :departments="departments" @change="handleChange" />
        </el-tab-pane>
        <el-tab-pane :label="$t('排除部门')" name="tab11">
          <DepartmentDimension ref="ref11" :type="11" :departments="departments" @change="handleChange" />
        </el-tab-pane>
      </el-tabs>
    </div>
    <template #right>
      <l-panel :title="$t('已选择')">
        <template #toolLeft>
          <div class="l-panel--item">
            <el-input
              style="width: 200px"
              :placeholder="$t('请输入查询关键字')"
              v-model="searchWord"
              size="mini"
              @keyup.enter.native="hanleSearch"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="hanleSearch"
              ></el-button>
            </el-input>
          </div>
        </template>
        <template #toolRight>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="handleClear"
            >{{$t('清空')}}</el-button
          >
        </template>
        <l-table
          :columns="columns"
          pageLayout="total,prev, pager, next"
          :dataSource="selectArrShow"
        >
          <vxe-column :label="$t('操作')" :width="64">
            <template slot-scope="scope">
              <button
                style="color:#f56c6c"
                type="button"
                @click.stop="handleDelete(scope.row)"
                :class="['el-button', 'el-button--text', 'el-button--mini']"
              >
                <span>{{ $t("删除") }}</span>
              </button>
            </template>
          </vxe-column>
        </l-table>
      </l-panel>
    </template>
  </l-layout>
</template>
<script>
import UserDimension from "./userDimension";
import DepartmentDimension from "./departmentDimension";
import OptionsDimension from "./optionsDimension";
//import IntegrationRoleDimension from "./IntegrationRole";

export default {
  name: "l-user-d-select",
  components: {
    UserDimension,
    DepartmentDimension,
    OptionsDimension,
    //IntegrationRoleDimension,
  },
  data() {
    return {
      columns: [
        {
          label: "类型",
          prop: "f_Type",
          width: "80",
          dataType: "mydata",
          options: [
            { value: 1, label: "用户" },
            { value: 2, label: "部门" },
            { value: 3, label: "密级" },
            { value: 4, label: "行政级别" },
            { value: 5, label: "行政职务" },
            { value: 6, label: "技术职务" },
            { value: 7, label: "职称等级" },
            { value: 8, label: "管理职务" },
            { value: 9, label: "集成角色" },
            { value: 10, label: "限定部门" },
            { value: 11, label: "排除部门" },
          ],
        },
        { label: "已选择项", prop: "f_Name", minWidth: "110" },
      ],
      tableTotal: 0,
      tablePageSize: 1000,
      tableCurrentPage: 1,

      activeName: "tab1",
      searchWord: "",

      selectArrShow: [],
      selectArr: [],

      departments:[],

      secretColumns: [{ label: "密级", prop: "label", minWidth: "150" }],
      levelColumns: [{ label: "行政级别", prop: "label", minWidth: "150" }],
      jobColumns: [{ label: "行政职务", prop: "label", minWidth: "150" }],
      roleColumns: [{ label: "技术职务", prop: "label", minWidth: "150" }],
      titleColumns: [{ label: "职称等级", prop: "label", minWidth: "150" }],
      postColumns: [{ label: "管理职务", prop: "label", minWidth: "150" }],
    };
  },
  computed: {
    departmentApi(){
      return window.$api.organization.department;
    }
  },
  async created() {
    this.lr_loadCompanys && this.lr_loadCompanys();
    
  },
  methods: {
    // 数据选择变更
    handleChange({ values, addList, type }) {
      let list = this.selectArr.filter(
        (t) =>
          t.f_Type != type ||
          (t.f_Type == type && values.indexOf(t.f_UserId) > -1)
      );
      list.push(...addList);
      this.selectArr = list.sort((a, b) => {
        return a.f_Type - b.f_Type; //a-b为升序
      });
      this.tableSearchLoadData();
    },
    async loadDataItemList(code) {
      await this.lr_loadDataItem(code);
      return this.lr_dataItemOptions(this.lr_dataItem[code]);
    },

    // 在已选中搜索
    hanleSearch() {
      this.tableSearchLoadData();
    },
    tableSearchLoadData(isNotFirst) {
      if (!isNotFirst) {
        this.tableCurrentPage = 1;
      }
      let data = [];
      if (this.searchWord) {
        data = this.selectArr.filter((v) => {
          return v.f_Name.indexOf(this.searchWord) != -1;
        });
      } else {
        data = this.$deepClone(this.selectArr);
      }
      this.selectArrShow = data;
    },

    handleClear() {
      this.searchWord = "";
      for (let i = 1; i < 12; i++) {
        this.$refs[`ref${i}`] && this.$refs[`ref${i}`].clear();
      }
    },
    handleDelete({ f_Type, f_UserId }) {
      this.$refs[`ref${f_Type}`].delete(f_UserId);
    },

    initForm(){
      for (let i = 1; i < 12; i++) {
        this.$refs[`ref${i}`] && this.$refs[`ref${i}`].initForm();
      }
    },
    resetForm() {
      for (let i = 1; i < 12; i++) {
        this.$refs[`ref${i}`] && this.$refs[`ref${i}`].resetForm();
      }
      this.activeName = "tab1";
    },
    getForm() {
      return this.selectArr;
    },
    async setForm(list){
      this.departments =  await this.$awaitWraper(this.departmentApi.getList("all"));
      this.$nextTick(()=>{
        this.selectArr = list.sort((a, b) => {
          return a.f_Type - b.f_Type; //a-b为升序
        });
        this.tableSearchLoadData();
        for (let i = 1; i < 12; i++) {
          const _list = list.filter(t=>t.f_Type == i).map(t=>t.f_UserId);
          this.$refs[`ref${i}`] && this.$refs[`ref${i}`].setForm(_list);
        }
      });
      
    }
  },
};
</script>

<style>
.l-user-d-select .l-panel {
  padding: 0px;
}
.l-user-d-select .l-select-panel {
  padding: 0px !important;
}

.l-user-d-select .el-tabs__header {
  background-color: #fff;
  padding: 0 4px;
}
</style>
